<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5-Video-Player</title>
  <style type="text/css">
    .videoPlayer {
      border: 1px solid #000;
      width: 600px;
    }

    #video {
      margin-top: 0px;
    }

    #videoControls {
      width: 600px;
      margin-top: 0px;
    }

    .show {
      opacity: 1;
    }

    .hide {
      opacity: 0;
    }

    #progressWrap {
      background-color: black;
      height: 25px;
      cursor: pointer;
    }

    #playProgress {
      background-color: red;
      width: 0px;
      height: 25px;
      border-right: 2px solid blue;
    }

    #showProgress {
      background-color: ;
      font-weight: 600;
      font-size: 20px;
      line-height: 25px;
    }
  </style>
</head>

<body>
  <div class="">
    <h1>HTML5_Video_Player</h1>
    <div class="videoPlayer" id="videoContainer">
      <video id="video" width="600" height="360" preload controls>
        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>
        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>
      </video>
      <div id="videoControls">
        <div id="progressWrap">
          <div id="playProgress">
            <span id="showProgress">0</span>
          </div>
        </div>
        <div>
          <button id="playBtn" title="Play">播放</button>
          <button id="fullScreenBtn" title="FullScreen Toggle">全屏</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  // 为了不随意的创建全局变量，我们将我们的代码放在⼀个⾃⼰调⽤⾃⼰的匿名函数中，这是⼀个好的编程习惯
  (function (window, document) {
    // 获取要操作的元素
    var video = document.getElementById("video");
    var videoControls = document.getElementById("videoControls");
    var videoContainer = document.getElementById("videoContainer");
    var controls = document.getElementById("video_controls");
    var playBtn = document.getElementById("playBtn");
    var fullScreenBtn = document.getElementById("fullScreenBtn");
    var progressWrap = document.getElementById("progressWrap");
    var playProgress = document.getElementById("playProgress");
    var fullScreenFlag = false;
    var progressFlag;
    // 创建我们的操作对象，我们的所有操作都在这个对象上。
    var videoPlayer = {
      init: function () {
        var that = this;
        video.removeAttribute("controls");
        bindEvent(video, "loadeddata", videoPlayer.initControls);
        videoPlayer.operateControls();
      },
      initControls: function () {
        videoPlayer.showHideControls();
      },
      showHideControls: function () {
        bindEvent(video, "mouseover", showControls);
        bindEvent(videoControls, "mouseover", showControls);
        bindEvent(video, "mouseout", hideControls);
        bindEvent(videoControls, "mouseout", hideControls);
      },
      operateControls: function () {
        bindEvent(playBtn, "click", play);
        bindEvent(video, "click", play);
        bindEvent(fullScreenBtn, "click", fullScreen);
        bindEvent(progressWrap, "mousedown", videoSeek);
      }
    }
    videoPlayer.init();
    // 原⽣的JavaScript事件绑定函数
    function bindEvent(ele, eventName, func) {
      if (window.addEventListener) {
        ele.addEventListener(eventName, func);
      }
      else {
        ele.attachEvent('on' + eventName, func);
      }
    }
    // 显⽰video的控制⾯板
    function showControls() {
      videoControls.style.opacity = 1;
    }
    // 隐藏video的控制⾯板
    function hideControls() {
      // 为了让控制⾯板⼀直出现，我把videoControls.style.opacity的值改为1
      videoControls.style.opacity = 1;
    }
    // 控制video的播放
    function play() {
      if (video.paused || video.ended) {
        if (video.ended) {
          video.currentTime = 0;
        }
        video.play();
        playBtn.innerHTML = "暂停";
        progressFlag = setInterval(getProgress, 60);
      }
      else {
        video.pause();
        playBtn.innerHTML = "播放";
        clearInterval(progressFlag);
      }
    }
    // 控制video是否全屏，额这⼀部分没有实现好，以后有空我会接着研究⼀下
    function fullScreen() {
      if (fullScreenFlag) {
        videoContainer.webkitCancelFullScreen();
      }
      else {
        videoContainer.webkitRequestFullscreen();
      }
    }
    // video的播放条
    function getProgress() {
      var percent = video.currentTime / video.duration;
      playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
      showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
    }
    // ⿏标在播放条上点击时进⾏捕获并进⾏处理
    function videoSeek(e) {
      if (video.paused || video.ended) {
        play();
        enhanceVideoSeek(e);
      }
      else {
        enhanceVideoSeek(e);
      }
    }
    function enhanceVideoSeek(e) {
      clearInterval(progressFlag);
      var length = e.pageX - progressWrap.offsetLeft;
      var percent = length / progressWrap.offsetWidth;
      playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
      video.currentTime = percent * video.duration;
      progressFlag = setInterval(getProgress, 60);
    }
  }(this, document))

</script>